<template>
  <fieldset class="fieldset-component">
    <legend class="legend" :style="{ width: widthSize }" :title="title">
      <span class="legend-title" :style="{ fontSize: titleFontSize }">{{ title }}</span>
      <span v-if="subTitle" class="legend-sub-title">（{{ subTitle }}）<span class="redTitle">{{ redTitle }}</span></span>
    </legend>
    <slot />
  </fieldset>
</template>

<script>
export default {
  name: 'WangTitle',
  props: {
    title: {
      type: String,
      required: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    titleFontSize: {
      type: String,
      default: '16px'
    },
    widthSize: {
      type: String,
      default: '100px'
    },
    redTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">
.fieldset-component {
  border: #B4CEF7 dashed 1px;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;

  .legend {
    padding: 8px;
    .legend-title {
      font-weight: bold;
    }

    .legend-sub-title {
      color: rgb(37, 58, 93);
      font-size: 14px;
    }
  }
}
.redTitle {
  color: rgb(185, 7, 7);
  font-weight: 700;
}
</style>
